<template>
	<div>
		<el-dialog
			:title="isEdit ? '编辑' : '新增'"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose">
			<el-form label-position="left" :rules="formRules.staffForm" ref="staffForm" label-width="80px" :model="staffForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="staffForm.name"/>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="staffForm.age"/>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-input v-model="staffForm.sex"/>
				</el-form-item>
				<el-form-item label="编号" prop="code">
					<el-input v-model="staffForm.code"/>
				</el-form-item>
				<el-form-item label="部门" prop="deptId">
					<el-select v-model="staffForm.deptId" placeholder="请选择">
						<el-option
							v-for="item in departmentList"
							:key="item.id"
							:label="item.deptName"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
    		<el-button type="primary" @click="onSubmit" v-loading="loading">确 定</el-button>
  		</span>
		</el-dialog>
	</div>
</template>

<script>
  import * as staffManage from '@/api/staffManage';
  // import * as departmentManage from '@/api/departmentManage'
  import * as postManage from '@/api/postManage'

  export default {
    name: 'addDialog',
		props: {
      dialogVisible: {
        type: Boolean,
				default: false
			},
      isEdit: {
        type: Boolean
			},
      staffData: {
        type: Object,
				default: {}
			}
		},
		data() {
      return {
        loading: false,
				departmentList: [],
				postList: [],
        staffForm: {
          name: '',
          age: '',
          sex: '',
          deptId: '',
          code: '',
          positionId: ''
        }
			}
		},
		methods: {
      async fetchDepartmentList() {
        try {
					const res = await departmentManage.fetchDepartmentList();
					this.departmentList = res.msg;
        } catch (e) {
					console.log(e)
        }
			},
      onSubmit() {
        if (this.isEdit) {
          this.onEditStaffForm()
				} else {
          this.onAddStaff();
				}
			},
      async onAddStaff() {
        try {
          this.$refs['staffForm'].validate(async (valid) => {
            if (valid) {
              this.loading = true;
              await staffManage.addStaff(this.staffForm);
              this.$notify({
								type: 'success',
								title: '成功',
								message: '添加成功'
							})
              this.handleFresh();
              this.handleClose();
						}
					})
        } catch (e) {
          this.$notify({
            title: '错误',
            type: 'error',
            message: '添加失败!'
          });
        } finally {
					this.loading = false;
        }
			},
      async onEditStaffForm() {
        try {
          this.loading = true;
          await staffManage.editStaff(this.staffForm);
          this.$notify({
            title: '信息',
            type: 'success',
            message: '修改成功!'
          });
          this.handleFresh();
          this.handleClose();
        } catch (e) {
					console.log(e);
        } finally {
					this.loading = false
        }
			},
      handleClose() {
        this.$emit('closeDialog');
			},
			handleFresh() {
        this.$emit('fresh');
			}
		},
		watch: {
      dialogVisible(newVal, oldVal) {
        if (newVal) {
          Object.assign(this.staffForm, this.staffData);
          if (!this.isEdit) {
            this.$nextTick(() => {
              debugger
              this.$refs['staffForm'].resetFields();
            })
					}
				}
			}
		},
		created () {
      this.staffForm = {
        name: '',
        age: '',
        sex: '',
        deptId: '',
        code: '',
      };
      this.fetchDepartmentList();
		}
  }
</script>

<style scoped>

</style>